<template>
  <div class="time_task_content flex-x flex-top">
    <div class="tabBox">
      <el-tabs
        v-model="activeName"
        v-init-screen-h="10"
        tab-position="left"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in manufactureSiteList"
          :key="item.name"
          :label="item.name"
          :name="item.name"
        />
      </el-tabs>
    </div>

    <el-row v-init-screen-h="10" :gutter="10" style="width: 100%">
      <el-col
        v-for="(item, index) in dataList"
        :key="index"
        style="margin-bottom: 10px"
        :xs="12"
        :sm="12"
        :md="8"
        :lg="8"
        :xl="6"
      >
        <TimeItem
          :shop-obj="item"
          @handleSet="handleSet"
          @regetData="getCentralizedShops"
        />
      </el-col>
      <div v-if="!dataList.length" class="noneTip">暂无数据</div>
    </el-row>
    <!-- 设置弹框 -->
    <Dialog ref="Dialog" @regetData="getCentralizedShops" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TimeItem from "./components/TimeItem.vue";
import Dialog from "./components/Dialog.vue";
import { getCentralizedShops } from "@/api/centralized";
import { TIME_TASK_TIME } from "../js/utils";
export default {
  components: {
    TimeItem,
    Dialog
  },
  data() {
    return {
      dialogVisble: false,
      activeName: "",
      activeToken: "",
      dataList: []
    };
  },
  mounted() {
    console.log(this.manufactureSiteList);
    this.activeName = this.$route.query.activeName
      ? this.$route.query.activeName
      : this.manufactureSiteList[0].name;
    this.activeToken = this.manufactureSiteList.find(
      item => item.name == this.activeName
    ).token;
    this.getCentralizedShops();
    this.timeOut();
  },
  computed: {
    ...mapGetters(["manufactureSiteList"])
  },
  methods: {
    // 获取列表数据
    async getCentralizedShops() {
      let param = { manufactureSite: this.activeName };
      const res = await getCentralizedShops(param);
      let { results } = res.data;
      results = results.map(item => {
        console.log("item :>> ", item.programRunTime, item.programSetTime);
        const percentage =
          (Number(item.programRunTime || 0) /
            Number(item.programSetTime || 0)) *
          100;
        return {
          ...item,
          percentage: isNaN(percentage) ? 0 : percentage
        };
      });

      this.dataList = [...results];
    },
    // tabs点击事件
    handleClick(e) {
      this.activeToken = this.manufactureSiteList[e.index].token;
      this.getCentralizedShops();
    },
    // 设置
    handleSet(obj) {
      this.$refs.Dialog.openDialog(obj);
    },
    //定时器
    timeOut() {
      let timer = setInterval(async () => {
        this.getCentralizedShops();
      }, TIME_TASK_TIME);
      this.$once("hook:beforeDestroy", () => {
        if (timer) {
          clearInterval(timer);
          timer = null;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.time_task_content {
  position: relative;
  color: #fff;
  padding: 0 20px 20px 10px;
  background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
    100%;
  background-size: cover;

  .tabBox {
    width: 40px;
  }
  ::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  ::-webkit-scrollbar {
    width: 4px !important;
  }
  ::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .noneTip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  /deep/ {
    .el-tabs__nav {
      height: 100%;
      padding-bottom: 4px;
      .el-tabs__item {
        height: 32.9% !important;
        // margin-bottom: 2px;
      }
    }
    .el-tabs--left {
      .el-tabs__item {
        display: flex;
        align-items: center;
        padding: 0px 16px 0px 8px;
        // padding: 0px;
        margin-right: 20px;
        width: 30px;
        line-height: 24px;
        height: auto;
        word-wrap: break-word;
        white-space: pre-line;
        margin-bottom: 5px;
        background: #2339a4;
        border-radius: 5px;
      }
    }
    .el-tabs__item.is-active {
      color: #fff !important; //修改激活表头字体颜色，默认是蓝色
      background: linear-gradient(
        to top,
        rgba(93, 200, 250, 1) 0%,
        rgba(74, 111, 246, 1) 100%
      );
    }
    .el-tabs__active-bar {
      background-color: transparent !important;
    }

    /*去掉tabs底部的下划线*/
    .el-tabs__nav-wrap::after {
      position: static !important;
    }

    .el-tabs__nav-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-tabs__item {
      color: #fff;
    }
    .el-tabs__item.is-active {
      color: #409eff;
    }
    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
  }
}
</style>
